<template>
    <div class="music">
        <el-header>
            <p>天气搜索记录</p>
        </el-header>
        <el-main>
            <div class="weather">
                <el-table
                    :data="weatherData"
                    style="width: 100%">
                    <el-table-column
                        prop="city"
                        label="搜索城市"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="device"
                        label="搜索设备"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="time"
                        label="搜索时间">
                    </el-table-column>
                    <el-table-column
                        prop="user"
                        label="搜索用户">
                    </el-table-column>
                </el-table>
                <div class="pageation">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        layout="prev, jumper, slot, next"
                        :page-size="pageSize"
                        :total="total"
                        >
                        <span style="text-align: center; color: #606266; font-weight: 400"> / {{ pageCount }} </span>
                    </el-pagination>
                </div>
            </div>
        </el-main>
    </div>
</template>

<script>
export default {
    name: 'Weather',
    data() {
        return {
            weatherData: [
                { city: '中国 上海', device: '手机', time: '2019-08-01 10:22:22 ', user: 13655565455 }
            ],
            currentPage: 1,
            pageSize: 10,
            total: 100
        }
    },
    computed: {
        pageCount(){
            return Math.ceil(this.total / this.pageSize)
        }
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    }
}
</script>

<style lang="scss" scoped>
.music{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #ffffff;
    .el-header{
        height: 64px !important;
        line-height: 64px;
        p{
            font-weight: bold;
        }
    }
    .el-main{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 64px;
    }
}
</style>

